import React, { createRef } from 'react'

export default class LifeDemo extends React.Component {
  myrefs = createRef()
  state = {
    count: 0
  }
  // componentWillMount() {
  //   // render函数之前，还没有挂载dom
  //   console.log('1')
  //   console.log(this.myrefs.current, 'dom挂载之前，此时返回的为null') 
  // }

  componentDidMount() {
    // render函数之后，dom已经挂载
    console.log(3)
    // console.log(this.myrefs.current)
  }

  // 更新阶段  分别为 props更新 和 本身的 state 更新
  // 监听props参数变化
  // componentWillReceiveProps(nextProps, nextState) {
  //   console.log(nextProps, nextState)
  // }

  // 监听state变化 更新前 返回false则不进行更新
  // 第二个参数为最新的state值，返回值为true或者false
  shouldComponentUpdate(nextProps, nextStatue) {
    console.log(this.state.count, nextStatue)
    return true
  }

  // componentWillUpdate() {
  //   // 数据更新后
  //   console.log('我是更新数据前运行的')
  // }

  componentDidUpdate() {
    console.log('我是更新数据后并且更新dom后运行的')
  }

  // 卸载生命周期
  componentWillUnmount() {
    console.log('组件卸载生命周期')
  }

  // react16版本中生命周期修改
  /**
   * 删除以下生命周期
   * componentWillMount   dom挂载前
   * componentWillReceiveProps    监听props变化
   * componentWillUpdate  数据变化前
   * 
   * 替换成以下生命周期
   */
  // 在 React 16.3.0 版本中：在组件实例化、接收到新的 props 时会被调用
  // 在 React 16.4.0 版本中：在组件实例化、接收到新的 props 、组件状态更新时会被调用
  // 需要设置成静态方法进行使用
   static getDerivedStateFromProps(nextProps,nextState) {
    // 该方法可以返回一个对象，将会和 state 发生合并，且不会触发 re-render。
    // 这个生命周期主要为我们提供了一个可以在组件实例化或 props、state 发生变化后根据 props 修改 state 的一个时机，
    // 用来替代旧的生命周期中的 componentWillMount、ComponentWillReceiveProps。因为是一个静态方法，this 指向不是组件实例。
    console.log(nextProps,nextState, 'getDerivedStateFromProps')
    return true
   }

   getSnapshotBeforeUpdate(prevProps,prevState) {
     // 在 render 函数调用之后，实际的 Dom 渲染之前，在这个阶段我们可以拿到上一个状态 Dom 元素的坐标、大小的等相关信息。用于替代旧的生命周期中的 componentWillUpdate。
     // 该函数的返回值将会作为 componentDidUpdate 的第三个参数出现。
   }

  render () {
    console.log('2')
    return (
      <div>
        <h1 ref={this.myrefs}>生命周期</h1>
        {this.state.count}
        <br />
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>count + 1</button>
      </div>
    )
  }
}